<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../../favicon.ico" rel="icon" type="image/x-icon" />
		<script type="text/javascript"  src="../../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link type="text/css"  rel="stylesheet" href="../../js/easyui/themes/icon.css"/>
		<link type="text/css" rel="stylesheet" href="../../js/easyui/themes/default/easyui.css"/>
		<script type="text/javascript" src="../../js/ztree/jquery.ztree.all-3.5.js" ></script>
		<link  type="text/css" rel="stylesheet" href="../../js/ztree/zTreeStyle.css" />
		
		<script type="text/jscript">
			
			$(function(){
				var setting1 = {
				data: {
					simpleData: {
						enable:true
					}
				},
				callback:{
					onClick:function(event, treeId, treeNode){
						if(treeNode.page!=undefined){
							addtab(treeNode);
						}
					}
				}
			};
			<!--定义数组-->
		/* 	var zNodes=[
				{id:1,pId:0,name:"asdfs"},
				{id:2,pId:0,name:"asdfs"},
				{id:11,pId:1,name:"asdfs",page:"www.baiduc.com"},
				{id:12,pId:1,name:"asdfs",page:"www.taobao.com"},
				{id:21,pId:2,name:"asdfs",page:"www.douyu.com"},
				{id:22,pId:2,name:"asdfs",page:"www.sina.com"}
			]; */
			$.post("../../data/menu.json",function(data){
				$.fn.zTree.init($("#basicset"),setting1,data);
			},"json")
			
			var setting2 = {
					data: {
						simpleData: {
							enable:true
						}
					},
					callback:{
						onClick:function(event, treeId, treeNode){
							if(treeNode.page!=undefined){
								addtab(treeNode);
							}
						}
					}
				};
				$.post("../../data/admin.json",function(data){
					$.fn.zTree.init($("#managerset"),setting2,data);
				},"json")
				
				$("#tt").tabs({
				
					onContextMenu:function(e,title,index){
						$("#mm").menu('show',{
							left: e.clientX, 
							top: e.clientY 
							} 
						);
						e.preventDefault(); // 禁用原来的右键效果 
					}
					
				});
				
			  	$("#mm").menu({
					onClick:function(item){
						if(item.name=='Close'){
							$('#tt').tabs('close',currentRightTitle);
						}else if(item.name=='CloseOthers'){
							var tabs = $('#tt').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != currentRightTitle){
									$('#tt').tabs('close',$(this).panel('options').title);
								}
							});
						}else{
							var tabs = $('#tt').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心'){
									$('#tt').tabs('close',$(this).panel('options').title);
								}
							});
						}
					}
				}); 
			});
	
			function addtab(treeNode){
				$('#tt').tabs('add',{ 
					title:treeNode.name, 
				 	 content:'<div style="width:100%;height:100%;overflow:hidden;">'
						+ '<iframe src="../../'+treeNode.page
						+'" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>',  
					closable:true, 
					tools:[{ 
						iconCls:'icon-mini-refresh', 
						handler : function(){ 
						alert('refresh'); 
						} 
					}] 
					}); 
			}
			
		

		</script>
	</head>
<body class="easyui-layout">
		<div data-options="region:'north',split:true" style="height:100px;"></div> 

<div data-options="region:'south',split:true" style="height:100px;"></div> 


	<div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;">
		<div  class="easyui-accordion" style="width:200px;" data-options="fit:true"> 
	
			<div title="基本功能" style="overflow:auto;padding:10px;"> 
					<ul id="basicset" class="ztree" style="width:260px; overflow:auto;"></ul>
			</div> 
			
			<div title="系统管理" data-options="selected:true" style="padding:10px;"> 
				<ul id="managerset" class="ztree" style="width:260px; overflow:auto;"></ul>
			</div> 
		
		</div> 
		
			
	</div> 

	<div data-options="region:'center',title:'消息中心'" style="padding:5px;background:#eee;">
			<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true"> 
			</div> 
	</div> 		

		<div id="mm" class="easyui-menu" style="width:120px;"> 
		
			<div data-options="name:'Close'">关闭当前窗口</div>
			<div data-options="name:'CloseOthers'">关闭其它窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div>
		
		</div> 

	
	</body>

</html>
